<style lang="scss">
.common-modal {
    .ivu-modal-header {  
        padding: 10px;
        * {
            font-size: 14px;
        }
    }
}
</style>
<template>
    <Modal
        class="common-modal"
        v-model="show"
        :title="getTitle"
        :width="getSize"
        :mask-closable="false"
        @on-cancel="close"
        v-bind="$attrs"
        :footer-hide="$attrs.showFooter == undefined ? false : !$attrs.showFooter"
    >
        <template #header>
            <header v-if="alert&&!component" class="text-center" :class="['color-'+(alert||'error')]">
                <Icon type="md-information-circle" />
				<span v-html="getTitle"></span>
			</header>
        </template>
        <div v-if="alert&&!component && showDesc" class="margin-5 text-center" v-html="getDesc"></div>
        <compFormedit
            ref="formdata"
            class="margin-10"
            v-if="alert&&!component && formdata&&formdata.length"
            :formdata="formdata"
            :value="formData"
        ></compFormedit>
        <template #footer>
            <footer v-if="alert&&!component" class="text-right">
                <Button
                    v-if="!single"
                    :type="alert||'error'"
                    style="margin-right:20px;min-width:76px;"
                    @click="handleConfirm"
                >{{confirmText||$t('global.common.update_OK')}}</Button>
                <Button style="min-width:76px;" @click="close">{{closeText||$t('global.modal.close')}}</Button>
            </footer>
        </template>
        <slot></slot>
        <Spin v-if="innerLoading" fix></Spin>
    </Modal>
</template>

<script>
import compFormedit from "./formedit";
export default {
    inheritAttrs: false,
    components: {
        compFormedit,
    },
    props: {
        title: String,
        langKey: String,
        value: Boolean,
        loading: Boolean,
        closeText: String,
        confirmText: String,
        single: Boolean, //仅显示关闭按钮
        alert: String,
        component: {
            default: false,
        },
        formdata: Array,
        params: Object,
        ajaxRequest: Function,
        width: {
            type: [String, Number],
            default: 360,
        },
        desc: String,
        showDesc: {
            type: Boolean,
            default: true,
        },
        callback: Function,
        interceptRequest: Function,
    },

    data() {
        return {
            innerLoading: false,
            show: this.value,
            formData: {},
        };
    },
    watch: {
        formdata() {
            this.getFormData();
        },
        value: {
            immediate: true,
            handler(val) {
                this.show = val;
            },
        },
        show: {
            handler(val) {
                this.$emit("input", val);
                if (!val) this.close();
            },
        },
        loading: {
            deep: true,
            immediate: true,
            handler(val) {
                this.innerLoading = val;
            },
        },
    },
    methods: {
        /**
         * @description 初始化FormData默认值
         */
        getFormData() {
            if (!Array.isArray(this.formdata)) return;
            const formData = {};
            this.formdata.forEach((item) => {
                const { key, default: value } = item;
                if (key && value !== undefined) {
                    formData[key] = value;
                }
            });

            this.formData = formData;
        },
        async handleConfirm() {
            let params = this.params,
                interceptRequest = this.interceptRequest,
                ajaxRequest = this.ajaxRequest,
                callback =
                    this.callback ||
                    ((res) => res && this.$Message.success(res.message));
            if (this.formdata) {
                const ref = this.$refs.formdata;
                const bool = await ref.validate();
                if (!bool)
                    return this.$Message.warning(
                        this.$ct("global.common.fill_required")
                    );
                params = { ...params, ...ref.formData };
            }
            if (typeof interceptRequest === "function")
                params = interceptRequest.call(this, params, this);
            if (params == false) {
                return;
            }

            if (typeof ajaxRequest === "function") {
                this.innerLoading = true;
                ajaxRequest(params).then(
                    (res) => {
                        this.$emit("on-confirm", params);
                        if (typeof callback === "function") callback(res);
                        this.close();
                    },
                    (err) => {
                        this.innerLoading = false;
                        this.$Message.error(err.message);
                    }
                );
            } else {
                this.innerLoading = this.loading !== undefined ? true : false;
                this.$emit("on-confirm", params);
            }
        },
        close() {
            this.show = this.innerLoading = false;
            this.$emit("on-close");
        },
    },
    computed: {
        //获取标题
        getTitle() {
            return this.langKey
                ? this.$ct(this.langKey, { defaultValue: this.title })
                : this.title;
        },
        getSize() {
            const width = this.width;
            switch (this.width) {
                case "small":
                    return 360;
                case "middle":
                    return 520;
                case "normal":
                    return 720;
                case "large":
                    return 1000;
                default:
                    return width;
            }
        },
        getDesc() {
            return (
                this.desc ||
                `${this.$ct("global.modal.confirm")} ${this.getTitle}?`
            );
        },
    },
};
</script>